<template>
    <view class="music-item">
        <!-- 音乐封面 -->
        <view class="music-box" @click="togglePlay">
            <image class="cover-image" :src="musicData.image_url" mode=""></image>
            <PlayIcons v-if="musicData.playStatus"></PlayIcons>
        </view>
        <view class="right-wrap">
            <view class="music-infos">
                <view class="name">{{ musicData.name }}</view>
                <view class="u-p-t-24">{{ musicData.singer }}</view>
                <view class="u-p-t-18">{{ formateMusicDuration(musicData.time) }}</view>
            </view>
            <view class="btns">
                <view class="icon" @click="toggleStar">
                    <u-icon size="34rpx" :name="musicData.isCollect ? 'star-fill' : 'star'" :color="musicData.isCollect ? '#f9ab08' : '#abb3b8'"></u-icon>
                </view>
                <view class="btn" @click="useMusic">使用</view>
            </view>
        </view>
    </view>
</template>
<script>
import { formate } from '@/common/utils.js';
import { PlayIcons } from './PlayIcons.vue';
export default {
    name: 'MusicItem',
    data() {
        return {
            musicDuration: '00:00',
            audioContext: {}
        };
    },
    props: {
        musicData: {
            type: Object,
            default: function() {
                return {};
            }
        },
        index: {
            type: Number,
            default: 0
        }
    },
    computed: {},
    created() {},
    methods: {
        formateMusicDuration(time) {
            if (!time) {
                return '00:00';
            }
            return formate(Math.floor(parseInt(time) / 60)) + ':' + formate(parseInt(time) % 60);
        },
        // 收藏or不收藏
        toggleStar() {
            this.$emit('toggleStar', this.index);
        },
        // 播放or暂停
        togglePlay() {
            this.$emit('togglePlay', this.index);
        },
        // 使用该音乐
        useMusic() {
            this.$emit('useMusic', this.musicData);
        }
    },
    components: { PlayIcons }
};
</script>
<style lang="scss" scoped>
.music-item {
    padding: 0 30rpx 50rpx;
    display: flex;
    .music-box {
        position: relative;
        width: 130rpx;
        height: 130rpx;
        border-radius: 10rpx;
        background-color: #dddddd;
        .cover-image {
            width: 130rpx;
            height: 130rpx;
            border-radius: 10rpx;
        }
    }

    .right-wrap {
        flex-grow: 9;
        display: flex;
        justify-content: space-between;
        padding: 8rpx 0 8rpx 30rpx;
        .music-infos {
            display: flex;
            flex-direction: column;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #abb3b8;
            .name {
                font-size: 30rpx;
                line-height: 30rpx;
                color: #262832;
            }
        }
        .btns {
            display: flex;
            align-items: center;
            .btn {
                width: 102rpx;
                height: 56rpx;
                background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#61171f, #61171f);
                border-radius: 10rpx;
                font-size: 26rpx;
                line-height: 26rpx;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 42rpx;
            }
            .icon {
                position: relative;
                &::after {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 200%;
                    height: 200%;
                    content: '';
                    z-index: 2;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}
</style>
